<template>
    <div class="view">
        <android-nav-bar title="会员升级" v-on:back="back"></android-nav-bar>
        <div class="rank-box">
            <div class="top-img">
                <img :src="publicPath+'img/base/love-img.jpg'">
            </div>
            <div class="rank-type">
                <div class="senior-member flex" v-if="!item.image" @click="buyUserRank(item.id)" v-for="item in ranks"
                     :style="`background:url(${publicPath}img/base/coupon.png) no-repeat;backgroundSize:100% 100%;backgroundPosition:0 0;`">
                    <div class="left">
                        <div class="title">
                            <span class="text">{{item.name}}</span><span class="price">￥{{item.price}}</span>
                        </div>
                        <div class="desc" v-html="item.describe"></div>
                    </div>
                    <div class="open">开通</div>
                </div>
                <div class="senior-member-has-img flex" style="border-radius: 8px;" v-if="item.image" @click="buyUserRank(item.id)" v-for="item in ranks"
                     :style="`background:url(${item.image.file_path}?imageView2/2/w/380/q/90/interlace/1) no-repeat;backgroundSize:100% 100%;backgroundPosition:0 0;`"></div>
            </div>
            <div class="fee-intro" @click.prevent="toPage('onlineArticle',{title:'fee_standard'})">点击可查看会员升级收费说明</div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class MineMemberRank extends Scene {
        private publicPath: string = process.env.BASE_URL;
        @State("UserStore")
        public user!: InterfaceUser;
        private ranks: any[] = [];

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private getRanks(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            Http.get(this.api.getUserRankParam, {}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    console.log(res);
                    loadToast.hide();
                    const index = res.data.findIndex((value: any) => value.id == 1);
                    res.data.splice(index, 1);
                    if (this.user.userRank <= 2) {
                        this.ranks = res.data;
                    } else if (this.user.userRank == 3) {
                        const index = res.data.findIndex((value: any) => value.id == 2);
                        res.data.splice(index, 1);
                        this.ranks = res.data;
                    }
                } else {
                    loadToast.hide();
                    this.globalSingleResultToast(res);
                }
            }).catch((res) => {
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private mounted(): void {
            this.getRanks();
        }

        private async buyUserRank(id: number): Promise<any> {
            let toast = (<any> this).$createToast({
                time: 0,
                txt: "正在提交升级订单...",
                mask: true,
            }).show();
            const res = await Http.post(this.api.upgradeUserRank, {id: id}, {token: this.user.token});
            if (res.code === 1) {
                this.redirectTo({
                    name: "orderChannel",
                    query: {
                        orderIds: res.data.id.join(","),
                        orderType: "upgrade"
                    }
                });
                toast.hide();
            } else {
                toast = (<any> this).$createToast({
                    time: 1000,
                    txt: "升级订单提交失败，请重试",
                    mask: true,
                }).show();
            }
        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden;

        .rank-box
            margin-top calc(var(--safe-area-inset-top) + 47px);
            height calc(100vh - var(--safe-area-inset-top) - 47px);

            &::before
                display table;
                content '';

            .top-img
                img
                    display block;
                    width 100vw;
                    height 40vw;

            .rank-type
                .senior-member
                    position relative;
                    height 100px;
                    margin 10px 5px;
                    justify-content: left;
                    align-items center;
                    text-align left;
                    font-size 16px;

                    &::after
                        position absolute;
                        content '';
                        width 1px;
                        height 85px;
                        border-left 1px dashed $theme-common-color;
                        opacity .6;
                        top 7px;
                        right 105px;

                    .left
                        width calc(100vw - 105px - 10px);
                        padding-right 10px;
                        padding-left 15px;
                        height 75px;
                        display flex;
                        justify-content center;
                        flex-direction column;

                        .desc
                            margin-top 10px;
                            font-size 12px;
                            color $theme-advancing-color;
                            line-height 1.3em;

                        .title
                            display block;
                            font-size 19px;

                        .text
                            background-image -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
                            color transparent;
                            background-clip text;

                        .price
                            color $theme-common-color;
                            padding-left 15px;
                            font-size 14px;

                    .open
                        width 100px;
                        text-align center;
                        color $theme-common-color;

                .senior-member-has-img
                    position relative;
                    height 100px;
                    margin 10px 5px;
                    justify-content: left;
                    align-items center;
                    text-align left;
                    font-size 16px;

            .fee-intro
                color $theme-common-color;
                text-align right;
                padding 10px;
                text-decoration underline;
</style>
